@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/font/open-sans/open-sans-v15-latin-regular.woff2") format("woff2"), url("/assets/font/open-sans/open-sans-v15-latin-regular.woff") format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url("/assets/font/open-sans/open-sans-v15-latin-600.woff2") format("woff2"), url("/assets/font/open-sans/open-sans-v15-latin-600.woff") format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/font/open-sans/open-sans-v15-latin-700.woff2") format("woff2"), url("/assets/font/open-sans/open-sans-v15-latin-700.woff") format("woff")
}

@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 300;
    src: local("Kanit Light"), local("Kanit-Light"), url("/assets/font/kanit/kanit-v3-latin-300.woff2") format("woff2"), url("/assets/font/kanit/kanit-v3-latin-300.woff") format("woff")
}

@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 600;
    src: local("Kanit SemiBold"), local("Kanit-SemiBold"), url("/assets/font/kanit/kanit-v3-latin-600.woff2") format("woff2"), url("/assets/font/kanit/kanit-v3-latin-600.woff") format("woff")
}

@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 700;
    src: local("Kanit Bold"), local("Kanit-Bold"), url("/assets/font/kanit/kanit-v3-latin-700.woff2") format("woff2"), url("/assets/font/kanit/kanit-v3-latin-700.woff") format("woff");
    font-display: block
}

@font-face {
    font-family: 'fontello';
    src: url("/assets/font/icons/fontello.eot?52988341");
    src: url("/assets/font/icons/fontello.eot?52988341#iefix") format("embedded-opentype"), url("/assets/font/icons/fontello.woff2?52988341") format("woff2"), url("/assets/font/icons/fontello.woff?52988341") format("woff"), url("/assets/font/icons/fontello.ttf?52988341") format("truetype"), url("/assets/font/icons/fontello.svg?52988341#fontello") format("svg");
    font-weight: normal;
    font-style: normal
}

.Gradient_Fill_1 {
    background-image: -moz-linear-gradient(45deg, #e00817 47%, #eb441d 70%, #fc0 100%);
    background-image: -webkit-linear-gradient(45deg, #e00817 47%, #eb441d 70%, #fc0 100%);
    background-image: -ms-linear-gradient(45deg, #e00817 40%, #eb441d 60%, #fc0 80%);
    position: absolute;
    left: 2457px;
    top: 466px;
    width: 1366px;
    height: 191px;
    z-index: 847
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 1em
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: #333;
    padding-top: 85px
}

@media screen and (min-width: 768px) {
    body {
        padding-top: 115px
    }
}

@media screen and (min-width: 1200px) {
    body {
        padding-top: 0px
    }
}

ul {
    list-style: none;
    padding: 0;
    margin: 0
}

a {
    color: inherit;
    text-decoration: none;
    transition: all .5s
}

a.p-link {
    text-decoration: underline
}

a:visited,
a:focus {
    color: inherit
}

p a {
    color: #D30815;
    text-decoration: underline
}

a:hover,
button.btn-std:hover {
    color: #222
}

img {
    max-width: 100%;
    height: auto
}

button,
[type='button'],
[type='reset'],
[type='submit'],
[type='color'],
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
input:not([type]),
textarea {
    vertical-align: middle;
    appearance: none;
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #333;
    font-size: 100%;
    font-family: inherit;
    font-weight: inherit;
    border-radius: 0;
    transition: all .5s
}

button[name="retour-btn"] {
    font-weight: 600;
    font-size: 95%;
    margin-bottom: 15px;
    padding: 5px 0;
    color: #666
}

button[name="retour-btn"] i {
    margin-right: 5px
}

@media screen and (min-width: 1200px) {
    button[name="retour-btn"] {
        display: none
    }
}

[type='color'],
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
input:not([type]),
textarea {
    border: 1px solid #333;
    padding: 5px 10px;
    cursor: auto
}

.bold {
    font-weight: 700
}

.ft-caps {
    text-transform: uppercase
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    text-transform: uppercase;
    font-family: "Kanit", sans-serif;
    font-weight: 700
}

h1 {
    font-size: 125%;
    margin-bottom: 25px;
    max-width: 90%;
    font-weight: 600
}

h1 span.smaller {
    display: block;
    padding: 10px 0 0px 0;
    font-size: 80%;
    line-height: 1.2
}

@media screen and (min-width: 768px) {
    h1 {
        margin-bottom: 50px;
        max-width: 100%
    }
}

@media screen and (min-width: 1000px) {
    h1 span.smaller {
        font-size: 68%;
        line-height: 1.1;
        padding-top: 0
    }
}

h1.h-cart {
    position: relative;
    color: white;
    padding: .6em 1em .6em 0;
    display: inline-block;
    line-height: 1;
    max-width: 95%
}

h1.h-cart:before {
    content: '';
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: -20px;
    position: absolute;
    z-index: -1;
    background-color: inherit
}

@media screen and (min-width: 768px) {
    h1.h-cart {
        padding: .4em .8em .4em 0
    }
}

@media screen and (min-width: 1000px) {
    h1.h-cart:before {
        left: -30px
    }
}

@media screen and (min-width: 1200px) {
    h1.h-cart:before {
        left: -2000px
    }
}

h2 {
    font-size: 125%;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    padding-top: 3%;
    line-height: 1
}

h2.smaller {
    padding-top: 0
}

h2+p {
    margin-top: -5px
}

@media screen and (min-width: 768px) {
    h2+p {
        margin-top: -15px
    }
}

@media screen and (min-width: 768px) {
    h2+h3 {
        margin-top: 40px
    }
}

h3 {
    font-size: 115%;
    margin-bottom: 12px
}

h4 {
    font-size: 85%;
    margin-bottom: 15px
}

@media screen and (min-width: 768px) {

    h1,
    h2 {
        font-size: 162.5%
    }

    h2 {
        margin-bottom: 30px
    }

    h3 {
        font-size: 138%;
        margin-bottom: 15px
    }

    h4 {
        font-size: 95%
    }
}

@media screen and (min-width: 1000px) {

    h1,
    h2 {
        font-size: 187.5%
    }

    h2.smaller {
        font-size: 150%
    }

    h3 {
        font-size: 149.5%
    }
}

@media screen and (min-width: 1200px) {

    h1,
    h2 {
        font-size: 218.75%
    }
}

p {
    line-height: 1.6;
    margin: 0px auto 20px auto
}

@media screen and (max-width: 767px) {
    p {
        font-size: 95%;
        margin: 0px auto 10px auto;
        line-height: 1.4
    }
}

p:last-of-type {
    margin-bottom: 0
}

p+h3 {
    margin-top: 20px
}

@media screen and (min-width: 768px) {
    p+h3 {
        margin-top: 30px
    }
}

p.intro-text {
    font-style: italic;
    color: #999;
    line-height: 1.5;
    margin-bottom: 20px
}

@media screen and (min-width: 768px) {
    p.intro-text {
        font-size: 120%;
        margin-bottom: 40px
    }
}

.algn-c {
    text-align: center
}

.algn-j {
    text-align: justify
}

.clearfix::after {
    clear: both;
    content: "";
    display: block
}

.clearfix::before {
    clear: both;
    content: "";
    display: block
}

.clr-white {
    color: white
}

.clr-brand {
    color: #D30815
}

.clr-brand-bg {
    background-color: #D30815
}

.clr-brand-2 {
    color: #F5960F
}

.clr-brand-2-bg {
    background-color: #F5960F
}

body>header,
section.base,
footer,
.breadcrumb,
.back {
    padding-left: 20px;
    padding-right: 20px
}

@media screen and (min-width: 1000px) {

    body>header,
    section.base,
    footer,
    .breadcrumb,
    .back {
        padding-left: 30px;
        padding-right: 30px
    }
}

section {
    position: relative
}

section.base {
    padding-top: 40px;
    padding-bottom: 40px
}

section.base:first-of-type {
    padding-top: 5px
}

@media screen and (min-width: 768px) {
    section.base {
        padding-top: 50px;
        padding-bottom: 50px
    }

    section.base:first-of-type {
        padding-top: 40px
    }
}

@media screen and (min-width: 1000px) {
    section.base {
        padding-top: 50px;
        padding-bottom: 50px
    }

    section.base:first-of-type {
        padding-top: 50px
    }
}

section.base-2 {
    padding-bottom: 30px
}

@media screen and (min-width: 1000px) {
    section.base-2 {
        padding-bottom: 40px
    }
}

section.base-2:last-of-type {
    padding-bottom: 0px
}

.main-max-width {
    max-width: 1168px;
    margin: 0 auto
}

.mrgn-b-10 {
    margin-bottom: 10px
}

.semi-bold {
    font-weight: 600
}

.breadcrumb {
    display: none
}

.breadcrumb li:before,
.breadcrumb a:before {
    margin: 0;
    width: auto;
    color: #999;
    vertical-align: bottom
}

.breadcrumb li {
    display: inline-block;
    margin-right: 7px
}

.breadcrumb li:not(:first-of-type) {
    font-size: 65%
}

.breadcrumb li:not(:first-of-type):before {
    margin-right: 10px;
    vertical-align: baseline;
    font-size: 13px
}

@media screen and (min-width: 768px) {
    .breadcrumb {
        display: block
    }
}

@media screen and (min-width: 768px) {
    nav.back {
        display: none
    }
}

.video-cont {
    margin: 0 auto;
    max-width: 770px;
    margin-bottom: 20px
}

@media screen and (min-width: 768px) {
    .video-cont {
        margin-bottom: 30px
    }
}

.video-cont:last-of-type {
    margin-bottom: 0
}

.responsive-video {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    background: black
}

.responsive-video iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0
}

.swiper-container {
    position: relative;
    overflow: hidden
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative
}

.lazyload,
.lazyloading {
    opacity: 0
}

.lazyloaded {
    opacity: 1;
    transition: opacity .5s
}

.udf-hidden {
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s;
    transition-delay: .5s
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-youtube-play {
    color: #e05f5f
}

.icon-linkedin-rect {
    color: #0077B5
}

.icon-location:before {
    content: '\e800'
}

.icon-loupe:before {
    content: '\e801'
}

.icon-mail:before {
    content: '\e802'
}

.icon-phone-1:before {
    content: '\e803'
}

.icon-close:before {
    content: '\e804'
}

.icon-arrow-right:before {
    content: '\e805'
}

.icon-menu:before {
    content: '\e806'
}

.icon-round-arrow-left:before {
    content: '\e807'
}

.icon-round-arrow-right:before {
    content: '\e808'
}

.icon-round-arrow-down:before {
    content: '\e809'
}

.icon-round-arrow-up:before {
    content: '\e80a'
}

.icon-ok:before {
    content: '\e80b'
}

.icon-arrow-down:before {
    content: '\e80c'
}

.icon-arrow-left:before {
    content: '\e80d'
}

.icon-arrow-up:before {
    content: '\e80e'
}

.icon-home:before {
    content: '\e80f'
}

.icon-fl-r:before {
    content: '\e810'
}

.icon-fl-l:before {
    content: '\e811'
}

.icon-file:before {
    content: '\e812'
}

.icon-pdf:before {
    content: '\e813'
}

.icon-down-open:before {
    content: '\f004'
}

.icon-up-open:before {
    content: '\f005'
}

.icon-right-open:before {
    content: '\f006'
}

.icon-left-open:before {
    content: '\f007'
}

.icon-youtube-play:before {
    content: '\f16a'
}

.icon-fax:before {
    content: '\f1ac'
}

.icon-facebook-official:before {
    content: '\f230'
}

.icon-linkedin-rect:before {
    content: '\f312'
}

body>header {
    padding-top: 20px;
    padding-bottom: 0px;
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(7px)
}

body>header a.logo {
    display: inline-block;
    margin-bottom: 10px;
    position: relative;
    z-index: 2
}

body>header a.logo img {
    width: 131.56px
}

@media screen and (min-width: 768px) {
    body>header a.logo img {
        width: 173.58px
    }
}

@media screen and (min-width: 1200px) {
    body>header a.logo img {
        width: 220px;
        height: 83px
    }
}

body>header [name="burger-btn"] {
    float: right;
    margin-top: 8px;
    width: 45px;
    color: #999
}

@media screen and (min-width: 768px) {
    body>header [name="burger-btn"] {
        width: 65px;
        font-size: 20px
    }
}

@media screen and (max-width: 1199px) {
    body>header nav {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 500px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(100%);
        background: white;
        padding: 40px 20px;
        transition: transform .5s;
        -webkit-overflow-scrolling: touch;
        z-index: 3
    }

    body>header nav [name="close-btn"] {
        position: absolute;
        top: 40px;
        right: 25px;
        color: #999;
        font-size: 20px;
        z-index: 300
    }
}

@media screen and (min-width: 1200px) {
    body>header nav {
        transition: none
    }
}

body>header nav .lang-menu {
    position: relative;
    display: inline-block;
    font-size: 75%;
    z-index: 100;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #666;
    min-width: 110px
}

body>header nav .lang-menu button,
body>header nav .lang-menu>ul {
    border: 1px solid #a3a3a3
}

body>header nav .lang-menu button {
    background: white;
    padding: 5px 10px 5px 10px;
    position: relative;
    text-transform: uppercase;
    width: 100%;
    text-align: right
}

body>header nav .lang-menu>ul {
    visibility: hidden;
    text-align: right;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    transform: translateY(-2em);
    z-index: -1;
    margin-top: -1px;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s
}

body>header nav .lang-menu>ul a {
    display: inline-block;
    padding: 10px
}

body>header nav .lang-menu>ul a span {
    margin-left: 0px;
    opacity: 0;
    color: #F5960F
}

body>header nav .lang-menu>ul a.current span {
    opacity: 1
}

body>header nav .lang-menu:focus>ul,
body>header nav .lang-menu:hover>ul {
    background: white;
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s
}

@media screen and (min-width: 1200px) {
    body>header nav .lang-menu {
        min-width: 90px
    }
}

body>header nav form.search {
    margin-bottom: 10px;
    color: #666
}

body>header nav form.search input {
    border: none;
    border-bottom: 1px solid #333;
    width: 0;
    padding: 0 0 2px 0;
    opacity: 0;
    margin-left: 0px;
    transition: all .5s
}

body>header nav form.search button {
    cursor: default
}

body>header nav form.search:hover input {
    width: 226px;
    opacity: 1;
    margin-left: 5px
}

body>header nav form.search input:focus {
    width: 226px;
    opacity: 1;
    margin-left: 5px
}

@media screen and (max-width: 1199px) {
    body>header nav>ul {
        width: 100%;
        font-size: 80%;
        color: #999;
        font-weight: 600
    }

    body>header nav>ul a {
        display: block;
        padding: 12px 0
    }

    body>header nav>ul a span {
        float: right;
        font-size: 16px;
        margin-top: -2px
    }

    body>header nav>ul>li .maximenu {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        bottom: 0;
        background: white;
        padding: 40px 20px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .5s;
        z-index: 200
    }

    body>header nav>ul>li .maximenu [name="retour-btn"] {
        margin-bottom: 40px;
        font-size: 115%
    }

    body>header nav>ul>li .maximenu.opened {
        transform: translateX(0%)
    }

    body>header nav>ul>li .maximenu ul li.title {
        color: #333;
        margin-bottom: 12px
    }
}

@media screen and (max-width: 1199px) {
    body>header.nav-opened nav {
        transition: transform .5s;
        transform: translateX(0%);
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3)
    }
}

@media screen and (min-width: 1200px) {
    body>header {
        background: none;
        position: relative
    }

    body>header [name="burger-btn"],
    body>header [name="close-btn"],
    body>header [name="arrow-right-light"],
    body>header li.title,
    body>header [name="retour-btn"] {
        display: none
    }

    body>header nav .item-cont {
        position: absolute;
        top: 40px;
        left: 30px;
        right: 30px
    }

    body>header nav .lang-menu,
    body>header nav form.search {
        float: right;
        margin-bottom: 0;
        margin-left: 35px
    }

    body>header nav .lang-menu {
        font-size: 60%
    }

    body>header nav .lang-menu button {
        padding: 5px 10px 5px 15px
    }

    body>header nav>ul {
        text-align: justify;
        height: 40px
    }

    body>header nav>ul:after {
        content: '';
        display: inline-block;
        width: 100%
    }

    body>header nav>ul>li {
        display: inline-block;
        vertical-align: top
    }

    body>header nav>ul>li>a {
        font-size: 90%;
        display: inline-block;
        position: relative;
        padding-bottom: 5px;
        border-bottom: 5px solid transparent;
        color: #666
    }

    body>header nav>ul>li .maximenu {
        position: absolute;
        right: 0;
        left: 0;
        overflow: hidden;
        visibility: hidden;
        transition-delay: .5s
    }

    body>header nav>ul>li .maximenu .container {
        transform: translateY(-100%);
        transition: transform .5s;
        background: #D30815;
        background-image: url(okle/images/bg-maximenu_ecosafe.png), linear-gradient(45deg, #e00817 40%, #eb441d 60%, #fc0 80%);
        background-repeat: no-repeat;
        background-position: center center, left top;
        color: white;
        padding: 15px 0;
        font-size: 75%;
        font-weight: 600;
        text-align: left
    }

    body>header nav>ul>li .maximenu ul {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
        column-fill: balance;
        max-height: 190px
    }

    body>header nav>ul>li .maximenu ul li {
        padding: 10px 20px 10px 10px;
        line-height: 1.5;
        display: inline-block;
        width: 100%
    }

    body>header nav>ul>li .maximenu ul li.title {
        display: none
    }

    body>header nav>ul>li .maximenu ul li a {
        border-bottom: 1px solid transparent
    }

    body>header nav>ul>li .maximenu ul li a:hover {
        color: inherit;
        border-bottom: 1px solid white
    }

    body>header nav>ul>li:hover>a {
        border-bottom: 5px solid #D30815
    }

    body>header nav>ul>li:hover .maximenu {
        visibility: visible;
        transition-delay: .0s
    }

    body>header nav>ul>li:hover .maximenu .container {
        transform: translateY(0%)
    }
}